<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>简单时钟</title>
    </head>
    <link rel="stylesheet" type="text/css" href="./clock.css" />
    <script src="./clock.js" type="text/javascript" ></script>
    </script>
    <body>
        <div class="clockBox">
            <div class="time" id="time">00 : 00 : 01</div>
        </div>
    </body>
</html>
<script>
    setInterval(getTime, 1000)
    function getTime() {
        var date = new Date()
        var time = date.toLocaleTimeString()
        var parentTime = time.replace(/:/g, ' : ')
        document.getElementById('time').innerHTML = parentTime
    }
</script>
<style>
    body {
        display: flex;
        justify-content: center;
        background: linear-gradient(
            90deg,
            rgb(253, 183, 183),
            rgb(141, 228, 255)
        );
    }
    .clockBox {
        margin: 15vh;
        margin: 15vh;
        width: 50vw;
        height: 50vh;
        border: 3px solid white;
        border-radius: 15px;
        box-shadow: 3px 5px 5px 10px rgb(0, 0, 0);
        display: flex;
        justify-content: center;
        -webkit-box-reflect: below 0px -webkit-linear-gradient(top, rgba(250, 250, 250, 0), rgba(
                        250,
                        250,
                        250,
                        0
                    )
                    30%, rgba(250, 250, 250, 0.3));
    }

    .time {
        user-select: none;
        font-size: 130px;
        color: aliceblue;
        text-shadow: 7px 3px 5px black;
        line-height: 45vh;
    }
</style>
